const { Graph } = G6;

// 模拟的数据
const data = {
  nodes: [],
  edges: [],
};

// 层级配置
const layerConfig = [
  { name: "I6000", type: "circle", count: 1, color: "#79ffa8" }, // 第一层
  { name: "服务层", type: "circle", count: 20, color: "#1890FF" }, // 第二层
  { name: "实例层", type: "rect", count: 20, color: "#2FC25B" }, // 第三层
  { name: "K8s层", type: "diamond", count: 20, color: "#FACC14" }, // 第四层
  { name: "ECS层", type: "triangle", count: 20, color: "#8543E0" }, // 第五层
  { name: "物理机", type: "modelRect", count: 20, color: "#13C2C2" }, // 第六层
];

// 生成节点
layerConfig.forEach((layer, layerIndex) => {
  for (let i = 1; i <= layer.count; i++) {
    data.nodes.push({
      id: `layer${layerIndex}-${i}`,
      label: layer.name == "I6000" ? "I6000" : `${layer.name}${i}`,
      type: "circle",
      layer: layerIndex,
    });
  }
});
// 生成连接线
for (let layerIdx = 0; layerIdx < layerConfig.length - 1; layerIdx++) {
  // 获取当前层所有节点ID
  const sourceNodes = data.nodes
    .filter((n) => n.layer === layerIdx)
    .map((n) => n.id);

  // 获取下层所有节点ID
  const targetNodes = data.nodes
    .filter((n) => n.layer === layerIdx + 1)
    .map((n) => n.id);

  if (sourceNodes.length === 1) {
    // 如果上一层只有一个节点，连接到下一层的所有节点
    sourceNodes.forEach((source) => {
      targetNodes.forEach((target) => {
        data.edges.push({
          id: `${source}-${target}`,
          source,
          target,
          // style: {
          //   lineWidth: Math.max(1, 3 - layerIdx * 0.5),
          //   stroke: layerConfig[layerIdx].color,
          //   lineDash: layerIdx > 2 ? [5, 5] : null // 下层用虚线
          // }
        });
      });
    });
  } else if (sourceNodes.length === targetNodes.length) {
    // 如果上下两层节点数量相同，一对一连接
    sourceNodes.forEach((source, index) => {
      const target = targetNodes[index];
      data.edges.push({
        source,
        target,
        // style: {
        //   lineWidth: Math.max(1, 3 - layerIdx * 0.5),
        //   stroke: layerConfig[layerIdx].color,
        //   lineDash: layerIdx > 2 ? [5, 5] : null // 下层用虚线
        // }
      });
    });
  } else {
    // 如果上下两层节点数量不同，选择性地一个节点连接多个节点
    // 这里选择每个上层节点连接到下层的多个节点，具体数量可以根据需求调整
    const targetPerSource = Math.ceil(targetNodes.length / sourceNodes.length);
    sourceNodes.forEach((source, index) => {
      for (let j = 0; j < targetPerSource; j++) {
        const targetIndex = index * targetPerSource + j;
        if (targetIndex < targetNodes.length) {
          const target = targetNodes[targetIndex];
          data.edges.push({
            source,
            target,
            // style: {
            //   lineWidth: Math.max(1, 3 - layerIdx * 0.5),
            //   stroke: layerConfig[layerIdx].color,
            //   lineDash: layerIdx > 2 ? [5, 5] : null // 下层用虚线
            // }
          });
        }
      }
    });
  }
}
// 定义一个名为 node 的对象，用于配置节点的样式、状态和调色板等属性
const node = {
  // 节点的样式配置
  style: {
    size: [80, 50],
    radius: 8,
    labelText: (d) =>
      d.label.length > 3 && !d.label.includes("I6000")
        ? `
    ${d.label.substring(0, 3)}
    ${d.label.substring(3)}
    `
        : d.label,
    fill: function (node) {
      let color = "";
      switch (node.id) {
        case "layer0-1":
          color = "#79ffa8";
          break;
        case "1":
          color = "#d32f2f";
          break;
        default:
          color = "#eee";
          break;
      }
      return color;
    },
    labelBackground: false, // 标签背景
    labelPlacement: "center", // 标签位置
    ports: [{ placement: "top" }, { placement: "bottom" }], // 添加端点
  },
  state: {
    highlight: {
      lineWidth: 3,
      stroke: "orange",
    },
  },
  palette: {
    field: (d) => d.combo,
  },
};

const edge = {
  type: "cubic-vertical",
  style: {
    endArrow: true,
    stroke: function (edge) {
      return edge.id === "edge-253" ? "#bf4dec" : "#928f8f";
    },
  },
};

// 创建图实例
const graph = new Graph({
  // 基础配置
  container: "container",
  autoFit: {
    type: "center",
    // options: {
    //   // 仅适用于 'view' 类型
    //   when: 'overflow', // 何时适配：'overflow'(仅当内容溢出时) 或 'always'(总是适配)
    //   direction: 'x', // 适配方向：'x'、'y' 或 'both'
    // },
  },
  // padding: [0, 40, 0, 110],
  // 自适应类型：'view' 或 'center'  'view' - 自动缩放，确保所有内容都在视图内可见'center' - 内容居中显示，但不改变缩放比例
  // autoResize: true, // 是否自动调整画布大小以适应容器
  // cursor: "grab",
  // 视口配置
  // padding: 20,
  // animation: false, // 是否启用动画效果
  // 主题配置
  // theme: "dark",

  // 节点配置
  node,
  // 边配置
  edge,

  // 布局配置
  // layout: {
  //   type: 'antv-dagre',
  //   ranksep: 50,
  //   nodesep: 5,
  //   sortByCombo: true,
  //   enable: false
  // },
  layout: {
    // 指定要使用的布局算法
    type: "antv-dagre",
    preventOverlap: true, // 避免节点重叠
    // linkDistance: 100, // 边长度
    // nodeStrength: -1000, // 节点斥力
    nodesep: -1,
    radial: true, // 是否使用径向布局
    // 布局算法的配置项
    // gravity: 10
    // ...
    rankdir: "TB", // 布局方向：从上到下
    // align:'DL',
    // nodesep: 1,
    // sortByCombo:true,    // 节点水平间距
    // ranksepFunc: (currentRank) => { // 根据当前层级返回间距
    //   console.log(currentRank);
    //   if (currentRank.id == 'layer0-1') return 75 // 第二层（索引从0开始）
    //   if (currentRank.id.includes('layer1')) return 50   // 第三层
    //   return 75 // 其他层默认
    // },
    ranksep: 40,
    controlPoints: true,
    sortByCombo: false,
  },
  // 交互行为
  behaviors: ["drag-canvas", "zoom-canvas", "click-select"],
  data,
  // data: oldData,
});

// 渲染图层
graph.render();
